<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>产品详情</title>
    <link rel="stylesheet" href="/stylesheets/css/index.css">
    <style media="screen">
      .productlist {
        height: 1000px;
      }
      .product {
        width: 70%;
        margin: 100px auto;
        display: block;

      }
      .product > img {
        height: 400px;
      }
      .product > a {
        font-size: 28pt;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <%- include('he_nav') -%>

      <div class="main box">
        <div class="productlist">
          <div class="product">
            <h1><%= doc.pname%></h3>
            <img src="<%= doc.pimgsrc%>" alt="">
            <h6>产品价格 : <%= doc.pprice%> | 浏览次数 : <%= doc.accessNum%> </h6>
            <div class="showproduct">
              <p>产品详情：<%= doc.pdescription%></p>
            </div>
            <p>更新时间：<%= doc.S_Time%></p>
          </div>
        </div>
        <form action="/users/product/:id/edit" method="post">
          <input type="text" name="pname" placeholder="产品名称（20字以内）">
          <div style="color:red" data-error="pname"></div>
          <input type="file" class="file" type="file" alt="上传图片" onchange="createReader(readImage)(event)">
          <div style="color:red" data-error="img"></div>
          <input type="text" name="pprice" placeholder="产品价格（即￥0.01~￥999999.99）">
          <div style="color:red" data-error="pprice"></div>
          <textarea name="pdescription" maxlength="100" placeholder="产品详情（100字以内）"></textarea>
          <div style="color:red" data-error="pdescription"></div>
          <%= firstnum %> + <%= secondnum %> = <input type="text" class="verif" name="vnum" >
          <button type="submit" name="button" style="margin-left: 68%">编辑产品</button>
          <div style="color:red" data-error="vnum"></div>
        </form>
      </div>

      <%- include('sid_footer') -%>
    </div>
    <script type="text/javascript" src="../../../javascripts/open.js"></script>
    <script type="text/javascript" src="../../../javascripts/readfile.js"></script>
    <script type="text/javascript" src="../../../javascripts/validateProduct.js"></script>
    <script type="text/javascript">
      const form = document.querySelector("form");
      const doms = form.querySelectorAll("div");
      const pnameerror = doms[0];
      const pimgsrcerror = doms[1];
      const ppriceerror = doms[2];
      const pdescriptionerror = doms[3];
      const vnumerror = doms[4];
      const firstnum = <%= firstnum %>;
      const secondnum = <%= secondnum %>;
      const proLogId = "<%= doc.id %>";
      // console.log("proLogId=",proLogId);

      form.onsubmit = async function (event) {
        event.preventDefault();
        const inputs = form.querySelectorAll("input");
        const pname = inputs[0].value;
        var pimgsrc = "";
        if (pimgsrcerror.firstChild) {
          pimgsrc = pimgsrcerror.firstChild.src;
        }
        const pprice = inputs[2].value;
        const vnum = inputs[3].value;
        const pdescription = form.querySelector("textarea").value;
        const errors = valiPro(pname,pimgsrc,pprice,pdescription,vnum,firstnum,secondnum);
        if(errors){
          showInfo(JSON.stringify(errors));
        }else{
          await fetch("edit",{
            method:"POST",
            body: JSON.stringify({proLogId,pname,pimgsrc,pprice,pdescription,vnum}),
            credentials:"include",
            headers:{
              "Content-Type":"application/json"
            }
          }).then(res=>res.text())
            .then(errors=>alert(errors))
            .catch(e => console.log("error", e));
          location.href="/product";
        }
      }
    </script>
  </body>
</html>
